<template>
  <div>
    <el-dialog
      ref="refDlg"
      title="新增"
      :visible.sync="dialogShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600"
      @close="handleBack"
    >
      <div>
        <el-form ref="ruleForm" :model="formData" size="mini" :rules="rules" label-width="140px">
          <el-row class="form_item_height">
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="所属专区:" prop="configStyle">
                <span v-if="flag === 'detail'">{{ formData.styleName }}</span>
                <input-with-dialog
                  v-else
                  v-model="formData.configStyle"
                  :props="{label:'styleName',value:'id'}"
                  param-field="keyWord"
                  request-method="post"
                  :multiple="false"
                  :focus-query="true"
                  :config="styleConfig"
                  @change="styleChange"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="所属空间:" prop="configSpace">
                <span v-if="flag === 'detail'">{{ formData.spaceName }}</span>
                <input-with-dialog
                  v-else
                  v-model="formData.configSpace"
                  :props="{label:'spaceName',value:'spaceCode'}"
                  param-field="keyWord"
                  request-method="post"
                  :multiple="false"
                  :focus-query="true"
                  :config="spaceConfig"
                  @change="spaceChange"
                />
              </el-form-item>
            </el-col>

            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="上样推荐方案:" prop="recommendProgram">
                <span v-if="flag === 'detail'">{{ formaterData(recommendProgramList, formData.recommendProgram) }}</span>
                <c-dict-select v-else v-model="formData.recommendProgram" dict-type-code="RECOMMEND_PROGRAM" placeholder="上样推荐方案" />
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="专区划分:" prop="divide">
                <span v-if="flag === 'detail'">{{ formaterData(divideOptions, formData.divide) }}</span>
                <c-dict-select v-else v-model="formData.divide" multiple dict-type-code="ZONE_DIVISION" placeholder="专区划分" @change="changeMultiple" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="专区适用最小面积:" prop="suitMinarea">
                <span v-if="flag === 'detail'">{{ formData.suitMinarea }}</span>
                <el-input v-else v-model.number="formData.suitMinarea" placeholder="请输入适用最小面积" @change="checkArea('suitMinarea','suitMaxarea',formData.suitMinarea,'>')" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专区适用最大面积:" prop="suitMaxarea">
                <span v-if="flag === 'detail'">{{ formData.suitMaxarea }}</span>
                <el-input v-else v-model.number="formData.suitMaxarea" placeholder="请输入适用最大面积" @change="checkArea('suitMaxarea','suitMinarea',formData.suitMaxarea,'<')" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="专区款式最小数量:" prop="styleMinnum">
                <span v-if="flag === 'detail'">{{ formData.styleMinnum }}</span>
                <el-input v-else v-model.number="formData.styleMinnum" placeholder="请输入适用最小数量" @change="checkArea('styleMinnum','styleMaxnum',formData.styleMinnum,'>')" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专区款式最大数量:" prop="styleMaxnum">
                <span v-if="flag === 'detail'">{{ formData.styleMaxnum }}</span>
                <el-input v-else v-model.number="formData.styleMaxnum" placeholder="请输入适用最大数量" @change="checkArea('styleMaxnum','styleMinnum',formData.styleMaxnum,'<')" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="档案适用最小面积:" prop="archivesMinarea">
                <span v-if="flag === 'detail'">{{ formData.archivesMinarea }}</span>
                <el-input v-else v-model.number="formData.archivesMinarea" placeholder="请输入适用最小面积" @change="checkArea('archivesMinarea','archivesMaxarea',formData.archivesMinarea,'>')" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="档案适用最大面积:" prop="archivesMaxarea">
                <span v-if="flag === 'detail'">{{ formData.archivesMaxarea }}</span>
                <el-input v-else v-model.number="formData.archivesMaxarea" placeholder="请输入适用最大面积" @change="checkArea('archivesMaxarea','archivesMinarea',formData.archivesMaxarea,'<')" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer">
        <el-button size="mini" @click="handleBack">取消</el-button>
        <el-button type="primary" size="mini" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formaterData } from '@/utils'

import { saveProRecommend } from '@/api/basicData'
import { getDictByPatchType } from '@/api/dataDict'
export default {
  name: 'AddRecommendInfo',
  // components: { fileUploader },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      formaterData,
      formData: {
        configStyle: [],
        configSpace: [],
        recommendProgramList: [],
        divideOptions: [],
        enable: 1
      },
      rules: {
        configStyle: [{ required: true, message: '请选择所属专区' }],
        configSpace: [{ required: true, message: '请选择所属空间' }]
      },
      styleConfig: {
        title: '所属专区',
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configStyle/page`,
        setting: [
          {
            prop: 'styleCode',
            title: '编码'
          },
          {
            prop: 'styleName',
            title: '名称'
          }
        ],
        filtersRaw: [{ 'id': 'enable', 'property': 'enable', 'operator': '=', 'value': '1' }]
      },
      spaceConfig: {
        title: '所属空间',
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configSpace/page`,
        setting: [
          {
            prop: 'spaceCode',
            title: '编码'
          },
          {
            prop: 'spaceName',
            title: '名称'
          }
        ],
        filtersRaw: [{ 'id': 'enable', 'property': 'enable', 'operator': '=', 'value': '1' },
          { 'id': 'areaCode', 'property': 'areaCode', 'operator': 'in', 'value': '[Q014, Q015]' }]
      }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.getDictByPatchTypeAll(['RECOMMEND_PROGRAM', 'SERIES_NAME', 'ZONE_DIVISION']).then(res => {
      this.recommendProgramList = res.RECOMMEND_PROGRAM
      this.seriesNameList = res.SERIES_NAME
      this.divideOptions = res.ZONE_DIVISION
    })
  },
  methods: {
    changeMultiple(data) {
      if (!data || data.length === 0) return
      if (data.includes('A') && data.length > 1) {
        this.$message.warning('样板间和其他专区不可同时选择')
        this.formData.divide = []
      }
    },
    async getDictByPatchTypeAll(data) {
      const obj = await getDictByPatchType(data)
        .then(res => {
          return res
        })
      return obj
    },
    // 选择风格
    styleChange(row) {
      this.formData.configStyleId = row[0].id
    },
    // 选择空间
    spaceChange(row) {
      this.formData.configSpaceId = row[0].id
    },
    checkArea(param1, param2, value, operator) {
      const area = value
      if (isNaN(area) || area < 0 || (area % 1 !== 0)) {
        this.$message.warning('请输入大于或等于0的整数')
        this.formData[param1] = ''
        return
      }
      if (operator === '>' && value > this.formData[param2]) {
        this.$message.warning(`不可大于适用最大适用数，请重新输入`)
        value = ''
      }
      if (operator === '<' && value < this.formData[param2]) {
        this.$message.warning(`不可小于适用最小适用数，请重新输入`)
        value = ''
      }
    },
    // 取消
    handleBack() {
      this.dialogShow = false
      this.clearForm()
    },
    // 清空表单
    clearForm(done) {
      this.formData = {}
      this.$refs.refForm && this.$refs.refForm.clearValidate()
      done && done()
    },
    // 提交
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$set(this.formData, 'divide', (this.formData.divide && this.formData.divide.join(',')) || '')
          saveProRecommend(this.formData).then(res => {
            if (res.success) {
              this.$message.success('操作成功')
              this.dialogShow = false
              this.clearForm()
              // const isNew = !this.formData.id
              this.$emit('success', res.data)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
